<template>
    <div class="typeselect">
        <div class="title">
            {{label}}
        </div>
        <div class="select_con">
            <div 
            class="select_con_item"
            :class="{active: !value}"
            @click="handleAllClick({})"
            >
                全部
            </div>

            <div 
            v-for="(item, index) in innerData" 
            class="select_con_item"
            :class="{active: item[props.value] == value}"
            :key="index"
            @click="handleClick(item, index)"
            >
                {{item[props.label]}}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        label: {
            type: String,
            default: '',
        },
        data: {
            type: Array,
            default: () => [],
        },
        activeValue: {
            type: String,
            default: '',
        },
        value: {
            type: String,
            default: '',
        },
        props: {
            type: Object,
            default: () => ({
                label: 'dicname',
                value: 'diccode',
            }),
        },
    },
    data() {
        return {};
    },
    computed: {
        innerData: function () {
            return this.data.map((item) => {
                return {
                    ...item,
                    isselect: false,
                };
            });
        },
        model: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('input', val);
            },
        },
    },
    methods: {
        handleClick (val,index) {
            this.model = val[this.props.value];
            
            this.$emit('click', val, index + 1);
        },
        handleAllClick () {
            this.model = '';

            let item = {
                [this.props.value] : '',
                [this.props.label] : '全部',
                children : null,
            }

            this.$emit('click', item, 0);
        },
    },
    mounted() {},
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
.typeselect {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    .title {
        padding: 6px;
        min-width: 82px;
        font-weight: 800;
        line-height: 1em;
    }
    .select_con {
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;

        .select_con_item {
            cursor: pointer;
            margin: 0 12px 6px 0;
            padding: 6px;
            line-height: 1em;

            &.active, &:hover {
                background-color: $primaryColor;
                color: white;
            }
        }
    }
}
</style>
